<template>
  <el-container>
    <el-main>
      <el-form :model="spaceForm" ref="spaceForm" :label-position="labelPosition" label-width="80px">
        <el-row class="headSearch">条件检索</el-row>
        <el-row class="rr">
          <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
            <el-form-item prop="berthNo" label-width="0">
              <el-input prefix-icon="el-icon-search" v-model="spaceForm.equipment_site" type="text" placeholder="设备编号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin:10px 24px 0">
            <el-button class="btnSearch1" type="primary" @click="submitForm()">搜索</el-button>
          </el-col>
        </el-row>
        <collapse-vertical>
          <el-row class="rr" v-show="item3Seem">
            <el-row>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="equipment_site" label="设备位置">
                  <el-input v-model="spaceForm.equipment_site" @click.native="openPark" type="text" placeholder="设备位置"/>
                </el-form-item>
              </el-col>
              <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
                <div>&nbsp;</div>
              </el-col>
              <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
                <el-form-item prop="equipment_manager" label="维修状态">
                  <el-input v-model="spaceForm.equipment_manager" @click.native="openRoad" type="text"
                            placeholder="维修状态"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item>
                <el-button class="btn-mini-form" type="primary" style="color: white"
                           size="mini">提交
                </el-button>
                <el-button class="btn-mini-form" type="primary" style="color: white"
                           size="mini">重置
                </el-button>
              </el-form-item>
            </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <!--<el-button  icon="el-icon-arrow-down" @click="item3Seem = !item3Seem" type="text"></el-button>-->
          <!-- <el-button  icon="el-icon-arrow-up" @click="closeHidden" type="text"></el-button>-->
          <el-button style="border: none;background-color: transparent" size="small"
                     @click="item3Seem = !item3Seem;isDisplay=!isDisplay" :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import CollapseVertical from '../../../utils/collapseVertical'

  export default {
    name: 'repairMagForm',
    props: ['park', 'road', 'ranNum', 'pageNum', 'pageSize'],
    created() {
      this.submitForm();
    },
    components: {CollapseVertical},
    data() {
      return {
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        labelPosition: 'left',
        spaceForm: {
          parkName: '',
          parkNo: '',
          berthNo: '',
          roadname: '',
          roadno: '',
          roadNum: '',
          berthType: '',
          berthStatus: '',
          isDemo: '',
          equipment_id: '',
          equipment_site: '',
          equipment_desc: '',
          equipment_status: '',
          equipment_type: '',
          equipment_person: '',
          equipment_phoneno: '',
          equipment_model: '',
          equipment_manager: '',
          equipment_operator: '',
          equipment_buy_time: '',
          equipment_long: '',
          equipment_lati: '',
          repair_time: '',
          repair_problem_desc: ''
        },
        numType: [], // 泊位类型
        numStatus: [], // 泊位状态
        demoRoad: [],// 是否示范路
        equipmentTypes: [
          {id: '0', value: '诱导屏'},
          {id: '1', value: '其他'},
        ],
        equipmentModels: [
          {id: '0', value: '未知'},
          {id: '1', value: 'P16双色显示屏'},
          {id: '2', value: 'P32双色显示屏'},
        ],
        statusTypes: [
          {id: '0', value: '空闲'},
          {id: '1', value: '正常'},
          {id: '2', value: '故障'},
        ],
      }
    },

    watch: {
      park: function (val) {
        this.spaceForm.parkName = val.parkname
        this.spaceForm.parkNo = val.parkNo
      },
      road: function (val) {
        this.spaceForm.roadname = val.unitname
        this.spaceForm.roadNo = val.unitno
      },
      pageNum: function (val) {
        this.submitForm()
      },
      ranNum: function (val) {
        this.submitForm()
      },
      pageSize: function (val) {
        this.submitForm()
      }
    },
    methods: {
      submitForm: function () {
        this.$emit('tableLoad', true);
        let dataList = {
          limit: {total: 5},
          list: [

          ]
        };
        this.$emit('tableData', dataList);
        this.$emit('tableLoad', false);
        /*        selBreth(this.spaceForm, this.pageSize, this.pageNum).then(res => {
                  selDictonaryValue(res).then(resp => {
                    this.$emit('tableData', resp)
                    this.$emit('tableLoad', false)
                  })
                })*/
      },
      resetForm: function (spaceForm) {
        this.$refs[spaceForm].resetFields()
      },
      openPark: function () {
        this.$emit('parkBoolean', true)
      },
      openRoad: function () {
        this.$emit('roadBoolean', true)
      }
    }
  }
</script>

<style scoped>
  #slideRow {
    border: none;
  }

  .hidBtn {
    margin-left: 8px
  }

  .hidBtn .el-button {
    margin-top: 10px;
    width: 45px;
    height: 22px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #444444;
    padding: 3px 10.5px;
  }

  .el-main {
    padding: 0px;
    margin: 0;
  }

  .headSearch {
    font-family: MicrosoftYaHei;
    font-size: 13px;
    color: #7F8CA6;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-top: 22px;
  }

  .btnSearch1 {
    width: 80px;
    height: 24px;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    padding: 4px 28px;
  }

  .rr {
    margin-left: 25px;
  }

  .el-footer {
    text-align: center;
    padding: 0;
    margin: 0;
    height: 0px;
  }

  .el-main {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .el-form-item {
    height: 48px;
    margin-bottom: 8px;
  }
</style>
